Cordova+Vue+Mint |
您所在的位置：网站首页 › vue cordova axios › Cordova+Vue+Mint |
Cordova+Vue+Mint
|
概要 软件安装清单:Node.js,Java JDK，gradle，Android Studio Demo:https://download.csdn.net/download/javon_huang/10839244 步骤一：安装Java SDK 配置环境变量： JAVA_HOME：C:\Program Files (x86)\Java\jdk1.8.0_91 CLASSPATH：.;%JAVA_HOME%\lib\tools.jar;%JAVA_HOME%\lib\dt.jar;%JAVA_HOME%\bin; Path：%JAVA_HOME%\bin; 备注:具体以安装目录路径为准。 使用命令测试是否安装成功 javac 步骤二：安装 gradle 移步官网下载指定zip，解压到指定的路径，并配置环境变量。 GRADLE_HOME： D:\Android\gradle Path：%ANDROID_HOME%\tools;%ANDROID_HOME%\platform-tools;%GRADLE_HOME%\bin 使用命令测试是否安装成功 adb 步骤三：Android Studio安装 安装完成后配置环境变量，设置Android SDK路径，具体以实际安装路径为准 ANDROID_HOME： C:\Users\JavonHuang\AppData\Local\Android\Sdk Path：%ANDROID_HOME%\tools；%ANDROID_HOME%\platform-tools；%GRADLE_HOME%\bin； 小结：配置总览 JAVA_HOME：C:\Program Files\Java\jdk1.8.0_191 CLASSPATH：.;%JAVA_HOME%\lib\tools.jar;%JAVA_HOME%\lib\dt.jar;%JAVA_HOME%\bin;E：D:\Android\gradle ANDROID_HOME：C:\Users\JavonHuang\AppData\Local\Android\Sdk path:%JAVA_HOME%\bin;%ANDROID_HOME%\tools;%ANDROID_HOME%\platform-tools;%GRADLE_HOME%\bin;D:\Android\apache-ant-1.9.7\bin 环境检查: 1.检查当前Cordova的开发环境：cordova requirements 步骤四：Cordova创建 1.全局安装Cordova：npm install -g cordova 2.创建一个Cordova项目：cordova create helloworld javon.huang.helloworld HelloWorld helloworld:项目文件夹名 avon.huang.helloworld:项目包名 Helloworld:项目名 3.进入项目文件夹cd helloworld,添加编译平台 安卓:cordova platform add android IOS:cordova platform add ios 3.外部网络设置，添加白名单插件：cordova plugin add cordova-plugin-whitelist 步骤五：编译Cordova项目 1.全局编译：cordova build 2.安卓编译：cordova build android 3：IOS编译：cordova build ios 步骤六：Vscode插件Cordova Tools（直接调试时使用） 用于模拟开发界面。 小结： 1.至此Cordova的开发环境配置完成，在没有错误的情况下可以生成apk文件。
2.下一步即整合Vue项目 步骤七：集成Vue项目 1.构建Vue项目：vue init webpack 2.引入minit-ui：npm install mint-ui 3.引入axios: npm install axios 4.安装依赖：npm install --save vue-cordova 5.修改index.js import Vue from 'vue' import MintUI from 'mint-ui' import 'mint-ui/lib/style.css' import App from './App' import router from './router' import axios from 'axios' Vue.use(MintUI) Vue.config.productionTip = false Vue.prototype.$axios=axios /* eslint-disable no-new */ new Vue({ el: '#app', router, components: { App }, template: '' })
5.修改webpack.base.conf.js，添加加载资源路径 { test: /\.css$/, include: [ /src/, '/node_modules/mint-ui/lib/', //增加此项导入其样式 ], loader: "style!css" }6.修改index.js将打包后的资源发布到Cordova编译路径www文件夹 index: path.resolve(__dirname,'../www/index.html'), assetsRoot: path.resolve(__dirname,'../www'), assetsSubDirectory:'',7.Vue项目启动: 1.编译：npm run build 2.启动：npm run dev 小结:支持整个开发环境搭建完毕，我们可以直接在同一个项目利用vue开发单页应用，在使用cordova进行apk打包。 问题1：在打包成app之后，可能会出现图片加载不出来的问题，主要要是打包之后图片的路径问题。可以通过修改utils.js指向路径。一下我的项目配置：
|
【本文地址】